<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weui.css"
	media="all">
<link rel="stylesheet" href="${ctx}/static/plug/weui/css/weuix.css"
	media="all">
<link rel="stylesheet" href="${ctx}/static/css/addCarNo.css" media="all">
<title>我的订单</title>
<style type="text/css">
body {
	background-color: #ebebeb;
}

.subjecter {
	margin-top: 20px;
	background-color: #ebebeb;
}

.subjecter>div {
	display: none;
	margin: 0 auto;
	width: 90%;
}
.red_label{
	background-image: url("${ctx}/static/images/redlabel.png");
	background-repeat: no-repeat;
	background-size: 100px 20px; 
	display: inline-block;
	width: 100px;
	height: 20px;
	color: white;
	text-align: right;
	font-size: 12px;
	position: absolute;
	top: 0;
	right: 0;
	
}
.ticketImg{
	padding: 10px;
}
.ticketImg > img{
	width: 80px;
	height: 80px;
}
.ticketOrders{
	width: 100%;
	background: white;
	height: 100px;
	border-radius: 10px;
	position:  relative;
	margin-bottom: 20px;
}
.ticketName{
	font-size: 16px;
	color: black;
	padding-top: 10px;
	
}
.ticketOrders > div{
	float: left;
}
.ticketOrders > div >p{
	
	font-size: 12px;
	color: #888;
}
.ticketImg{
	width: 30%;
}
.ticketData{
	width: 70%;
}
.ticketStatus{
	float: right;
	color: #f39800;
	font-size: 16px;
	font-weight: 700;
	padding-right: 10px;
}
.div-text{
 	text-align: center;
}
.noData > div >img{
	display:inline-block;
	margin: 20px auto; 
}
.noData > div{
	margin: 20px auto; 
	margin-top:140px;
	width: 150px;
}
.weui-cell__bd{
	text-align: center;
}
</style>
</head>
<body>

	<div class="weui-tab" id="t1" style="height: 44px;">
		<div class="weui-navbar">
			<div class="weui-navbar__item tab-green">待支付</div>
			<div class="weui-navbar__item">已完成</div>
		</div>

	</div>
	<input type="hidden" value="${userId}" id="userId">
	<div class="subjecter">
		<div class="To_be_paid">
			<c:if test="${orderMap.ToBePaid != null && fn:length(orderMap.ToBePaid) > 0}">
				<c:forEach var="ticketOrder" items="${orderMap.ToBePaid}">
					<div class="ticketOrders">
					<input type="hidden" value="${ticketOrder.id}" class="orderId">
						<div class="ticketImg">
							<img alt="" src="${ticketOrder.tickectImage }">
						</div>
						
						<div class="ticketData" >
							<p class="ticketName" style="font-size: 16px; color: black;">${ticketOrder.tickectName} <span class="red_label">半个小时内失效&nbsp;</span></p>
							<p>购票时间：${ticketOrder.orderTime }</p>
							<p>到期时间：${ticketOrder.validTime }</p>
							<p>购买张数：${ticketOrder.ticketNums}张</p>
						</div>
					</div>
				</c:forEach>
			</c:if>


			<c:if test="${orderMap.ToBePaid == null || fn:length(orderMap.ToBePaid) == 0}">
				<div class="noData">
					<div>
						<img alt="" src="${ctx}/static/images/nodata.png"
							width="150px">
					</div>
					<p class="div-text" style="padding-top: 20px">暂无未完成的订单记录</p>
				</div>
			</c:if>


		</div>
		<div class="payment_success" nowPage="1" >
			<c:if test="${orderMap.PaymentSuccess != null && fn:length(orderMap.PaymentSuccess) > 0}">
				<c:forEach  var="ticketOrder" items="${orderMap.PaymentSuccess}">
					<div class="ticketOrders">
					<input type="hidden" value="${ticketOrder.id}" class="orderId">
						<div class="ticketImg">
							<img alt="" src="${ticketOrder.tickectImage }">
						</div>
						
						<div class="ticketData" >
							<p class="ticketName" style="font-size: 16px; color: black;">${ticketOrder.tickectName} <span class="ticketStatus">已支付</span></p>
							<p>购票时间：${ticketOrder.orderTime }</p>
							<p>到期时间：${ticketOrder.validTime }</p>
							<p>购买张数：${ticketOrder.ticketNums}张 </p>
						</div>
					</div>
				</c:forEach>
			</c:if>


			<c:if test="${orderMap.PaymentSuccess == null || fn:length(orderMap.PaymentSuccess) == 0}">
				<div class="noData">
					<div>
						<img alt="" src="${ctx}/static/images/nodata.png"
							width="150px">
					</div>
					<div class="div-text" style="padding-top: 20px">无有订单记录</div>
				</div>
			</c:if>

		<div class="weui-panel__ft">
            <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
                <div class="weui-cell__bd" id="getmore">查看更多<i id="loading" class="weui-loading" style="opacity: 1; display: none;"></i></div>

            </a>
        </div>
		
		</div>
	</div>



</body>

<script src="${ctx}/static/js/jquery/jquery-3.2.1.min.js"></script>


<script src="${ctx}/static/js/laydate/laydate.js"></script>
<script src="${ctx}/static/plug/layer_mobile/layer.js"></script>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/plug/weui/js/zepto.weui.js"
	type="text/javascript"></script>

<script type="text/javascript">
	$(function() {
		var ToBePaidNum = ${orderMap.ToBePaidNum};
		var Initialization = 0;
		if(ToBePaidNum == 0){
			Initialization = 1;
		}
		$('#t1').tab({
			defaultIndex : Initialization,
			activeClass : 'tab-green',
			onToggle : function(index) {
				if (index == 0) {
					$(".subjecter").children().css("display", "none");
					$(".To_be_paid").css("display", "block");
				} else if (index == 1) {
					$(".subjecter").children().css("display", "none");
					$(".payment_success").css("display", "block");
				}
			}
		});
		$(".ticketOrders").click(function() {
			var orderId = $(this).find(".orderId").val();
			window.location.href = "${ctx}/order/singleOrder?orderId=" + orderId;
		});
		var submission = true;
		$("#getmore").click(function() {
			bindCl();
		});
		
		function bindCl() {
			if(!submission){
				return;
			}
			submission = false;
			$(".weui-panel__ft").remove();
			var page = $(".payment_success").attr("nowPage");
			page = parseInt(page);
			page = page+1
			var userId = $("#userId").val();
			var paramObj = {"page":page,"userId":userId};
			console.log(paramObj)
			$.post("${ctx}/order/paymentSuccessOrder",paramObj,function(obj) {
				console.log(obj.ticketOrderVoList)
				console.log(obj.ticketOrderVoList.length)
				submission = true;
				if(obj.ticketOrderVoList.length > 0){
					$(".payment_success").attr("nowPage",page);
					htmlValue(obj.ticketOrderVoList);
				}else {
					$(".payment_success").append('<p style="font-size: 16px; color: black;text-align: center;">没有更多订单了</p>');
				}
			});
		}
		
		function htmlValue(data) {
			for (var i = 0; i < data.length; i++) {
				var ticketOrder = data[i];
				var html='<div class="ticketOrders"><input type="hidden" value="'+ ticketOrder.id +'" class="orderId"><div class="ticketImg">'+
					'<img alt="" src="'+ticketOrder.tickectImage+'"></div><div class="ticketData" >'+
					'<p class="ticketName" style="font-size: 16px; color: black;">'+ticketOrder.tickectName +'</p>'+
					'<p>购票时间：'+ ticketOrder.orderTime +'</p><p>到期时间：'+ ticketOrder.validTime  + '</p>'+
					'<p>购买张数：'+ ticketOrder.ticketNums + '张 <span class="ticketStatus">已支付</span></p></div></div>'
				$(".payment_success").append(html);
			}
			var html = '<div class="weui-panel__ft"><a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">'+
            '<div class="weui-cell__bd" id="getmore">查看更多<i id="loading" class="weui-loading" style="opacity: 1; display: none;"></i></div></a></div>';
			$(".payment_success").append(html);
			$("#getmore").click(function() {
				bindCl();
			});
		}
	});
</script>
</html>